<template>
    <div class="main">
        <div class="top_header">
            <div class="sys_logo"><img class="sys_logo_img" src="~@/assets/logo.png"></div>
            <div class="sys_name">某某某某某某某某信息系统</div>
            <div class="btn_leftDrawer_ctl" @click="leftDrawerToggle()"><img class="btn_ctl_img" src="~@/assets/logo.png"/></div>
            <div class="top_nav_menu">
                <template>
                    <mapgis-ui-menu :selectedKeys='["mail"]' mode="horizontal">
                        <mapgis-ui-menu-item>
                            <mapgis-ui-icon type="mail" />
                            导航菜单一
                        </mapgis-ui-menu-item>
                        <mapgis-ui-menu-item disabled="">
                            <mapgis-ui-icon type="appstore" />
                            导航菜单二-禁用
                        </mapgis-ui-menu-item>
                        <mapgis-ui-sub-menu>
                          <span slot="title" class="submenu-title-wrapper">
                            导航菜单三 - 子菜单
                          </span>
                            <mapgis-ui-menu-item-group title="Item 1">
                                <mapgis-ui-menu-item>Option 1</mapgis-ui-menu-item>
                                <mapgis-ui-menu-item>Option 2</mapgis-ui-menu-item>
                            </mapgis-ui-menu-item-group>
                            <mapgis-ui-menu-item-group title="Item 2">
                                <mapgis-ui-menu-item>Option 3</mapgis-ui-menu-item>
                                <mapgis-ui-menu-item>Option 4</mapgis-ui-menu-item>
                            </mapgis-ui-menu-item-group>
                        </mapgis-ui-sub-menu>
                        <mapgis-ui-menu-item>
                            <a
                                    href="https://develop.smaryun.com"
                                    target="_blank"
                                    rel="noopener noreferrer"
                            >
                                导航菜单四 - 链接
                            </a>
                        </mapgis-ui-menu-item>
                    </mapgis-ui-menu>
                </template>
            </div>
            <div class="user_info"></div>
        </div>
        <div class="center_context">
            <!--左侧抽屉导航栏-->
            <mapgis-ui-drawer
                    :closable="true"
                    title="导航菜单"
                    :visible="isDrawerVisible"
                    placement="left"
                    @close="handleClose"
                    :wrapStyle="{marginTop:'60px'}"
                    :mask="false"
            >
                <template>
                    <mapgis-ui-menu :selectedKeys='["mail"]' mode="inline">
                        <mapgis-ui-menu-item>
                            <mapgis-ui-icon type="mail" />
                            导航菜单一
                        </mapgis-ui-menu-item>
                        <mapgis-ui-menu-item disabled="">
                            <mapgis-ui-icon type="appstore" />
                            导航菜单二-禁用
                        </mapgis-ui-menu-item>
                        <mapgis-ui-sub-menu>
                          <span slot="title" class="submenu-title-wrapper">
                            导航菜单三 - 子菜单
                          </span>
                            <mapgis-ui-menu-item-group title="Item 1">
                                <mapgis-ui-menu-item>Option 1</mapgis-ui-menu-item>
                                <mapgis-ui-menu-item>Option 2</mapgis-ui-menu-item>
                            </mapgis-ui-menu-item-group>
                            <mapgis-ui-menu-item-group title="Item 2">
                                <mapgis-ui-menu-item>Option 3</mapgis-ui-menu-item>
                                <mapgis-ui-menu-item>Option 4</mapgis-ui-menu-item>
                            </mapgis-ui-menu-item-group>
                        </mapgis-ui-sub-menu>
                        <mapgis-ui-menu-item>
                            <a
                                    href="https://develop.smaryun.com"
                                    target="_blank"
                                    rel="noopener noreferrer"
                            >
                                导航菜单四 - 链接
                            </a>
                        </mapgis-ui-menu-item>
                    </mapgis-ui-menu>
                </template>
            </mapgis-ui-drawer>
            <!--地图：哈哈，精彩内容开始辽……-->
            <mapgis-web-map
                    class="main"
                    :mapStyle="mapStyle"
                    :zoom="mapZoom"
                    :center="outerCenter"
                    :crs="mapCrs"
            >
                <!--<mapgis-igs-doc-layer
                        :layer="layer"
                        :layerId="layerId"
                        :sourceId="sourceId"
                        :ip="igsDocIp"
                        :port="igsDocPort"
                        :serverName="igsDocName"
                >
                </mapgis-igs-doc-layer>-->
                <!--图层3：校友分布1-->
                <mapgis-igs-doc-layer
                        :layer="layer3"
                        :layerId="layerId3"
                        :sourceId="sourceId3"
                        :ip="igsDocIp3"
                        :port="igsDocPort3"
                        :serverName="igsDocName3"
                >
                </mapgis-igs-doc-layer>

                <mapgis-igs-doc-layer
                        :layer="layer2"
                        :layerId="layerId2"
                        :sourceId="sourceId2"
                        :ip="igsDocIp2"
                        :port="igsDocPort2"
                        :serverName="igsDocName2"
                >
                </mapgis-igs-doc-layer>

                <mapgis-document>
                    <!--:wrapperStyle="{borderRadius:'20px',backgroundColor:'green',width:'300px'}"-->
                </mapgis-document>

            </mapgis-web-map>
        </div>
    </div>
</template>

<script>
    import Mapbox from '@mapgis/mapbox-gl'
    import { MapboxMap, MapboxIgsDocLayer } from '@mapgis/webclient-vue-mapboxgl'
    import MapgisDocument from "../../node_modules/@mapgis/webclient-vue-mapboxgl/src/components/UI/document/Document";

    export default {
        components: {
            MapgisDocument,
            MapboxMap, MapboxIgsDocLayer
        },
        data () {
            return {
                mapStyle: {
                    // 设置版本号，一定要设置
                    version: 8,
                    // 添加来源
                    sources: {},
                    // 设置加载并显示来源的图层信息
                    layers: []
                }, // 地图样式
                mapZoom: 5, // 地图初始化级数
                //outerCenter: [12389919,4341988], // 地图显示中心
                //outerCenter: [12286207.606220635,4216509.8240411337], // 地图显示中心
                outerCenter: [108.94, 34.27], // 地图显示中心  西安（看作是中国地图的几何中心）
                //outerCenter: [111.34, 36.22], // 地图显示中心（临汾）
                mapCrs: 'EPSG:3857',

                layerId: 'igsLayer_layerId',
                sourceId: 'igsLayer_sourceId',
                layer: {}, // 图层配置信息
                igsDocIp: 'jlu3s.com', // igs服务ip
                igsDocPort: '8015', // igs服务port
                igsDocName: 'LinFen01_3857', // igs地图服务名

                layerId2: '临汾专题图2',
                sourceId2: 'igsLayer_sourceId2',
                layer2: {}, // 图层配置信息
                igsDocIp2: 'jlu3s.com', // igs服务ip
                igsDocPort2: '8015', // igs服务port
                igsDocName2: 'LinFen02_3857', // igs地图服务名

                layerId3: '校友单位专题图（1）',
                sourceId3: 'igsLayer_sourceId3',
                layer3: {}, // 图层配置信息
                igsDocIp3: 'jlu3s.com', // igs服务ip
                igsDocPort3: '8015', // igs服务port
                //igsDocName3: 'dxgs_shoolmates1', // igs地图服务名
                igsDocName3: 'schoolmate_edu_1', // igs地图服务名

                isDrawerVisible: false, //左侧导航栏抽屉默认不显示
            }
        },
        created() {
            // 在组件中使用mapbox-gl.js的脚本库功能
            this.mapbox = Mapbox;
        },
        methods:{
            handleClose(done) {
                this.isDrawerVisible = false;
            },
            leftDrawerToggle(){
                this.isDrawerVisible = !this.isDrawerVisible;
            },
        }
    }
</script>

<style>
    .main {
        /*background-color: #c9ffce;*/
        height: 100vh;
        width: 100%;
    }
    .top_header {
        background-color:burlywood;
        width: 100%;
        height: 60px;
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .center_context {
        background-color:powderblue;
        width: 100%;
        height: calc( 100% - 60px);
    }

    .sys_logo {
        background-color: yellow;
        width: 80px;
        height: 60px;
        margin-left: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    .sys_logo_img {
        width:50px;
        height:50px;
    }
    .sys_name {
        background-color: chocolate;
        width:350px;
        height: 55px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        font-size: 22px;
    }
    .btn_leftDrawer_ctl {
        background-color: aliceblue;
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .btn_ctl_img {
        width:50px;
        height:50px;
    }
    .top_nav_menu {
        background-color: deepskyblue;
        width: calc(100% - 80px - 60px - 350px - 140px - 40px);
        height: 55px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .user_info {
        background-color: chartreuse;
        width: 150px;
        height: 55px;
        float:right !important;
        margin-right: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    /*::v-deep .mapgis-document-wrapper .document-header-title span  {
        color:red;
        background-color: chartreuse;
    }*/
</style>